<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <title>demo</title>
    <link rel="stylesheet" href="./src/css/reset.css">
    <link rel="stylesheet" href="./src/css/swiper.min.css">
    <link rel="stylesheet" href="./src/css/demo.css">
</head>

<body>
    <!-- 轮播图 -->
    <div class="swiper-container">
        <div class="swiper-wrapper ">
            <div class="swiper-slide">
                <img src="./src/images/1.png">
            </div>
            <div class="swiper-slide">
                <img src="./src/images/2.png">
            </div>
            <div class="swiper-slide">
                <img src="./src/images/3.png">
            </div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <!-- 预览轮播图 -->
    <div class="preview">
        <div class="preview-container">
            <div class="swiper-wrapper ">
                <div class="swiper-slide">
                    <img src="./src/images/1.png">
                </div>
                <div class="swiper-slide">
                    <img src="./src/images/2.png">
                </div>
                <div class="swiper-slide">
                    <img src="./src/images/3.png">
                </div>
            </div>
            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="list-img-box">
        <img class="list-img" data-original="./src/images/1.png" height="124">
        <img class="list-img" data-original="./src/images/2.png" height="124">
        <img class="list-img" data-original="./src/images/3.png" height="124">
        <img class="list-img" data-original="./src/images/4.png" height="124">
        <img class="list-img" data-original="./src/images/5.png" height="124">
        <img class="list-img" data-original="./src/images/6.png" height="124">
        <img class="list-img" data-original="./src/images/7.png" height="124">
    </div>

    <script src="./src/js/jquery-2.1.1.min.js"></script>
    <script src="./src/js/rem.js"></script>
    <script src="./src/js/swiper.min.js"></script>
    <script src="./src/js/vconsole.min.js"></script>
    <script src="./src/js/jquery.lazyload.min.js"></script>
    <script>
        // vConsole
        var vConsole = new VConsole();
        console.log('Hello world');
        // 图片懒加载（移动端height必填）
        $("img.list-img").lazyload({
            threshold: 20 // 距离加载
        });
        // 轮播图
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 1.2,
            effect: 'coverflow',
            centeredSlides: true,
            loop: false,
            pagination: {
                el: '.swiper-container .swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-container .swiper-button-next',
                prevEl: '.swiper-container .swiper-button-prev',
            },
        });
        // 预览轮播图
        let preview_swiper;
        // 点击预览
        $('.swiper-container img').click(function () {
            $('.preview').show();

            // 初始化swiper
            if (!preview_swiper) {
                preview_swiper = new Swiper('.preview-container', {
                    initialSlide: 1, // 默认第二张
                    centeredSlides: true,
                    loop: false,
                    pagination: {
                        el: '.preview-container .swiper-pagination',
                        clickable: true,
                    },
                    observer: true,
                    observeParents: true,
                });
            } else {
                // 更改默认图片
                preview_swiper.slideTo(0);
            }
        })
        // 关闭预览轮播
        $('.preview').click(function () {
            $(this).hide();
        })
        // 预览轮播图禁止冒泡
        $('.preview-container').click(function (e) {
            e.stopPropagation();
        })

        // 示例
        // var history_swiper = new Swiper('.history_swiper .swiper-container', {
        //     slidesPerView: '4',
        //     spaceBetween: 0,
        //     watchOverflow: true,//因为仅有1个slide，swiper无效
        //     loop: false,
        //     autoplay: {
        //         delay: 1000,
        //         stopOnLastSlide: false,
        //         disableOnInteraction: false,
        //     },
        //     pagination: {
        //         el: '.history_swiper .swiper-pagination',
        //         clickable: true,
        //     },
        //     breakpoints: {
        //         0: {
        //             slidesPerView: 2,
        //         },
        //         568: {
        //             slidesPerView: 3,
        //         },
        //         767: {
        //             slidesPerView: 3,
        //         },
        //         992: {
        //             slidesPerView: 4,
        //         },
        //         1360: {
        //             slidesPerView: 4,
        //         },
        //     },
        // });
        // //鼠标悬停自动轮播停止或继续
        // $('.history_swiper .swiper-slide').mouseenter(function () {
        //     history_swiper.autoplay.stop();
        // });
        // $('.history_swiper .swiper-slide').mouseleave(function () {
        //     history_swiper.autoplay.start();
        // });
    </script>
</body>

</html>